<template>
<div>
  <!-- 
    需求：点击按钮，把文字取反显示，再点击取反显示(回来了)
    
    先静后动：就是先把静态结构写出来，然后再思考如何实现功能

    实现步骤分析：
      1、给按钮绑定点击事件，并声明事件处理函数
      2、在事件处理函数中把msg变量的值颠倒过来即可
      3、做完了前面两步，你会发现神奇的一幕，浏览器是上的内容也已经发生了变化

   -->
   <h1>{{ msg }}</h1>
   <button @click="reverseFn">逆转世界</button>
</div>
</template>
<script>
export default {
  data(){
    return {
      msg: 'Hello, World'
    }
  },
  methods: {
    reverseFn(){
      // console.log(666);
      // 把msg变量的值颠倒过来即可
      // 我们知道的数组有颠倒顺序的方法，那么我们第一步就
      // 可以把字符串转换为数组  ["H", "e","l"...]
      // 在函数中必须要通过this来调用声明在data函数中的变量
      // 1、把字符串切割为数组
      let arr = this.msg.split("")
      // 2、把数组的顺序颠倒过来
      arr.reverse()
      // 3、把颠倒顺序后的数组转换为字符串 并复制给msg就搞定了
      this.msg = arr.join("") // msg的值发生变化，浏览器中展示效果也自动更新
      // 这里涉及到一个vue框架的设计思想(理念)：数据驱动视图 ----- 
      // 也就是说在vue中数据发生变化，浏览器展示的效果也自己跟着变化，其中完全不需要开发者去操作DOM（标签）
    }
  }
}
</script>
<style scoped>
</style>